<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   h2{
    text-align: center;
}

.main{
    display: flex;
    flex-wrap: wrap;
    width: 680px;
    justify-content: space-between;
}

.container{
    display: flex;
    width: 320px;
    height: 320px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content:space-between;
    flex-shrink: 0
}

.box{
    width: 90px;
    height: 90px;
    background-color: #EEEEEE;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;            
}

.row{
    display: flex;
    flex-basis: 100%;
}

.item{
    width: 24px;
    height: 24px;
    background-color: #000000;
    margin: 3px;
    border-radius: 50%;
}
    

/*排列方向*/
.flex-direction-column{
     flex-direction: column;
}

/*水平排列*/
.justify-content-center{
    justify-content: center;
}

.justify-content-flex-end{
    justify-content: flex-end;
}

.justify-content-space-between{
    justify-content: space-between;
}
    
/*垂直排列*/
 .align-items-center{
     align-items: center;
 }

 .align-items-flex-end{
     align-items: flex-end;
 }

 .align-items-space-between{
     align-items: space-between;
 }

/*多轴对齐*/
 .align-content-space-between{
    align-content: space-between;
 }

 /*项目排列*/
 .align-self-center{
    align-self: center;
 }

 .align-self-flex-end{
    align-self: flex-end;
 } 
</style>
<body>
    <div class="container">

        <div class="box">
            <span class="item"></span>
        </div>
    
        <div class="box justify-content-center">
            <span class="item"></span>          
        </div>
    
        <div class="box justify-content-flex-end">
            <span class="item"></span>
        </div>
    
        <div class="box align-items-center">
            <span class="item"></span>
        </div>
    
        <div class="box justify-content-center align-items-center">
            <span class="item"></span>
        </div>
    
        <div class="box justify-content-flex-end align-items-center">
            <span class="item"></span>
        </div>
    
        <div class="box align-items-flex-end">
            <span class="item"></span>
        </div>
        
        <div class="box justify-content-center align-items-flex-end">
            <span class="item"></span>
        </div>
    
         <div class="box justify-content-flex-end align-items-flex-end">
            <span class="item"></span>
        </div>     
    </div>
    <div class="container">
        <div class="box">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
        <div class="box">
            <span class="item"></span>
            <span class="item align-self-center"></span>
        </div>
        
        <div class="box justify-content-space-between">
            <span class="item"></span>
            <span class="item align-self-flex-end"></span>
        </div>
    
        <div class="box justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    
        <div class="box justify-content-space-between align-items-center">
            <span class="item"></span>
            <span class="item"></span>
        </div>  
        <div class="box justify-content-space-between align-items-flex-end">
            <span class="item"></span>
            <span class="item"></span>
        </div>  
    
        <div class="box justify-content-space-between flex-direction-column">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
        <div class="box justify-content-space-between align-items-center flex-direction-column">
            <span class="item"></span>
            <span class="item"></span>
        </div>  
    
        <div class="box justify-content-space-between align-items-flex-end flex-direction-column">
            <span class="item"></span> 
            <span class="item"></span>
        </div> 
    </div>
    <div class="container">
        <div class="box">
            <span class="item"></span>
            <span class="item align-self-center"></span>
            <span class="item align-self-flex-end"></span>
        </div>
        
        <div class="box justify-content-flex-end align-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
        <div class="box align-content-space-between">
           <div class="row justify-content-space-between">
                <span class="item"></span>
                <span class="item"></span>
            </div>
    
            <div class="row justify-content-space-between">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
    
        <div class="box align-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
    
        <div class="box align-content-space-between flex-direction-column">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
    
        <div class="box">
           <div class="row">
                <span class="item"></span>
                <span class="item"></span>
                <span class="item"></span>
            </div>
    
            <div class="row justify-content-center">
                <span class="item"></span>
            </div>
    
            <div class="row justify-content-space-between">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
    
         <div class="box">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
    </div>
    <div class="container">
        <div class="box justify-content-center align-items-center">
            <span class="item"></span>
        </div>
        
        <div class="box justify-content-space-between">
            <span class="item"></span>
            <span class="item align-self-flex-end"></span>
        </div>
        
        <div class="box">
                <span class="item"></span>
                <span class="item align-self-center"></span>
                <span class="item align-self-flex-end"></span>
        </div>
        
        <div class="box align-content-space-between">
            <div class="row justify-content-space-between">
                <span class="item"></span>
                <span class="item"></span>
            </div>
            
            <div class="row justify-content-space-between">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
    
        <div class="box">
            <div class="row justify-content-space-between">
                <span class="item"></span>
                <span class="item"></span>
            </div>
            
            <div class="row justify-content-center">
                <span class="item"></span>
            </div>
    
            <div class="row justify-content-space-between">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
    
        <div class="box align-content-space-between flex-direction-column">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>
</body>
</html>